<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'car.jsp' starting page</title>
  </head>
  
  <body>
    <select id="car" onchange="sendAjax()">
    	<option>-- 请选择汽车品牌 --</option>
    	<option value="bmw">宝马</option>
    	<option value="audi">奥迪</option>
    	<option value="benz">奔驰</option>
    </select>
    <select id="type">
    	<option>-- 请选择系列 --</option>
    </select>
    <script type="text/javascript">
   		 var xmlHttp;
		
		/*创建XMLHttpRequest对象*/
		function createXMLHttpRequest() {
			if(window.ActiveXObject) {
		  		//IE
	  			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	  		} else {
	  			//chrome firefox opera 
	  			xmlHttp = new XMLHttpRequest();
	  		}
		}
		
		function sendAjax(){
			createXMLHttpRequest();
			
			var name = document.getElementById("car").value;
			xmlHttp.onreadystatechange = callback;//回调函数
			
			
			xmlHttp.open("GET","car.jspx?name="+name,true);
			xmlHttp.send();
			
		}
		
		function callback() {
			if(xmlHttp.readyState == 4) {
				if(xmlHttp.status == 200) {
					var xml = xmlHttp.responseXML;
					
					var types = xml.getElementsByTagName("recode");
					document.getElementById("type").options.length = 1;
					for(var i = 0;i < types.length;i++) {
						
						//alert(types[i].childNodes[0].nodeValue);
						var myOption = new Option(types[i].childNodes[0].nodeValue,types[i].childNodes[0].nodeValue);
						document.getElementById("type").options.add(myOption);
						
					}
					
				} else {
					alert("Ajax Error!");
				}
			}
		}
    </script>
  </body>
</html>
